import CommonModal from "@/components/CommonModal";
import CommonLoading from "@/components/CommonLoading";
import CommonTable from "@/components/CommonTable";
import CommonPagination from "@/components/CommonPagination";
import FormRender from '@/components/FormRender';
import { useEffect, useState } from "react";
import { Button } from "antd";
import HandleResult from "../HandleResult";
import { aftersaleoperationlog } from "../../services";

//操作类型映射
const operaTypeMap = {
	1: "同意仅退款",
	2: "同意买家退货",
	3: "买家已退货，同意退款",
	4: "同意退款",
	5: "同意补发/换货",
	6: "拒绝仅退款",
	7: "拒绝买家退货",
	8: "拆包异常",
	9: "拒绝退款",
	10: "拒绝补发/换货",
	11: "确认收货",
	12: "售后发货",
};

const operaTypeOptions = Object.keys(operaTypeMap).map(v => {
	return {
		value: v,
		label: operaTypeMap[v]
	}
})

/** 处理结果查询 */
function AgreeBuyerRefund(props) {
	const { handleCancel } = props;
	const [loading, setLoading] = useState(false);

	const [open, setOpen] = useState(false);

	const [visible, setVisible] = useState(false);

	const [tableList, setTableList] = useState([]);

	const [logId, setLogId] = useState();

	const [query, setQuery] = useState({});

	const formArr = [
		{
			itemConfig: {
				name: 'afterSaleSns'
			},
			elConfig: {
				formType: 'Input',
				batchInput: true,
				placeholder: '售后单号',
			}
		},
		{
			formType: 'inputGroup',
			items: [
				{
					itemConfig: {
						name: 'timeType'
					},
					elConfig: {
						formType: 'noLabelSelect',
						placeholder: '时间类型',
						options: [
							{ label: '处理时间', value: '1' },
						],
						style: {
							width: '100px'
						}
					}
				},
				{
					itemConfig: {
						name: 'time'
					},
					elConfig: {
						formType: 'noLabelRangTime',
						placeholder: ['开始时间', '结束时间'],
						valueFormat: "YYYY_MM_DD HH:mm:ss",
						style: {
							width: '332px'
						}
					}
				},
			],
		},
		{
			itemConfig: {
				name: 'operationType'
			},
			elConfig: {
				formType: 'Select',
				placeholder: '操作项',
				options: operaTypeOptions
			}
		},
		{
			itemConfig: {
				name: 'isFailure'
			},
			elConfig: {
				formType: 'Select',
				placeholder: '存在处理失败',
				options: [
					{ label: '是', value: 1 },
					{ label: '否', value: 0 },
				]
			}
		}
	]

	//列表分页
	const [pages, setPages] = useState({
		current: 1,
		total: 0,
		pageSize: 20,
		pageSizeOptions: [10, 20, 50, 100]
	});

	const columns = [
		{
			title: "序号",
			dataIndex: "dataIndex",
			width: 60,
			render(v, r, i) {
				return i + 1;
			}
		},
		{
			title: "时间",
			dataIndex: "createTime",
			width: 150
		},
		{
			title: "操作项",
			dataIndex: "operationType",
			width: 120,
			render: t => operaTypeMap[t]
		},
		{
			title: "处理状态",
			dataIndex: "state",
			width: 120,
			render: t => {
				return t == 1 ? "处理完成" : "处理失败";
			}
		},
		{
			title: "操作人",
			dataIndex: "createAccount",
			width: 120
		},
		{
			title: "存在处理失败",
			dataIndex: "isFailure",
			width: 120,
			render: text => text == 1 ? '是' : '否'
		},
		{
			title: "操作",
			dataIndex: "state",
			key: "opera",
			width: 80,
			render: (t, r) => {
				return (
					<Button onClick={() => viewResult(r.id)} type="link">
						查看
					</Button>
				)
			}
		}
	];

	useEffect(() => {
		setOpen(true);
	}, []);

	useEffect(() => {
		getTableList();
	}, [pages.current, pages.pageSize, query]);

	const getTableList = async () => {
		setLoading(true);
		const params = {
			current: pages.current,
			size: pages.pageSize,
			...query
		}
		if(params.time) {
			params.operationStartTime = params.time[0].format('YYYY-MM-DD HH:mm:ss');
			params.operationEndTime = params.time[1].format('YYYY-MM-DD HH:mm:ss');
			params.time = undefined;
		}
		const { success, data } = await aftersaleoperationlog(params);
		if (success) {
			const { records, total } = data;
			setPages({
				...pages,
				total: total
			});
			setTableList(records);
		}
		setLoading(false);
	};

	//点击查看处理结果
	const viewResult = val => {
		setLogId(val);
		setVisible(true);
	};

	const onCancel = () => {
		setOpen(false);
	};

	const afterClose = () => {
		handleCancel();
	};

	const TableProps = {
		data: tableList,
		columns,
		scroll: {
			y: "45vh"
		}
	};

	//分页数据
	const pageProps = {
		pagination: pages,
		handleChange(current, size) {
			const obj = { ...pages, current, pageSize: size };
			setPages(obj);
		}
	};

	const HandleResultProps = {
		logId,
		handleCancel() {
			setVisible(false);
		}
	};

	//表单渲染组件
	const FormRenderProps = {
		query,
		formArr,
		formConfig: {
			name: 'handle-result-query-form',
			style: {padding: '0  0 16px 0' }
		},
		clickSearch(val) {
			setPages({
				...pages,
				current: 1
			});
			setQuery(val);
		},
		clickReset() {
			setPages({
				...pages,
				current: 1
			});
			setQuery({});
		},
	}

	return (
		<CommonModal
			title="处理结果查询"
			footer={<Button onClick={onCancel}>关闭</Button>}
			afterClose={afterClose}
			open={open}
			width="960px"
			onCancel={onCancel}
		>
			<FormRender {...FormRenderProps} />
			<CommonTable {...TableProps} />
			<div style={{ margin: "12px" }}>
				<CommonPagination {...pageProps} />
			</div>
			<CommonLoading loading={loading} />
			{visible && <HandleResult {...HandleResultProps} />}
		</CommonModal>
	);
}

export default AgreeBuyerRefund;
